<template>
    <el-input type="text" v-model="infoName" @blur="handleBlurNum" :disabled="disabled"></el-input>
</template>

<script>
    const reg = /(?=(?!\b)(?:\d{3})+(?!\d))/g
    const regNum = /^[1-9]\d*$/
    export default {
        model: {
            prop: 'val',
            event: 'select'
        },
        props: {
            val: '',
            name: '',
            disabled:false
        },
        name: "input-numbers",
        data() {
            return {
                num: '',
                logName:''
            }
        },
        methods: {
            handleBlurNum(event) {
                let val = event.target.value + ''
                this.num = val
                val = val.replace(/,/g, "")
                let emitVal = val.replace(/,/g, "")
                if (regNum.test(val)) {
                    this.infoName = val.replace(reg, ',');
                    this.logName = val.replace(reg, ',');
                    this.$emit('select', emitVal)
                } else {
                    this.infoName = val.replace(reg, ',');
                    this.logName = val.replace(reg, ',');
                    this.$emit('select', emitVal)
                }
            }
        },
        watch: {
            val(v) {
                if (v === '') {
                    this.infoName = ''
                    this.num = ''
                    this.logName = ''
                }
            },
        },
        computed: {
            infoName: {
                get() {
                    if (this.num === ''&&this.name) {
                        let val = this.name + ''
                        val = val.replace(/,/g, "")
                        let emitVal = val.replace(/,/g, "")
                        if (regNum.test(val)) {
                            return val.replace(reg, ',');
                        } else {
                            this.$emit('select', emitVal)
                            return val
                        }
                    }else {
                        return this.logName
                    }
                },
                set() {

                }
            }
        }
    }
</script>

<style scoped>

</style>
